<template>
    <div class="emoji-picker">
        <div class="emoji-grid">
            <div @click="showPopup">
                😀
            </div>
            <van-popup
  v-model:show="showBottom"
  position="bottom"
  :style="{ height: '30%'}"
>      <!-- 这里可以使用更复杂的逻辑来动态生成表情包列表，比如从服务器获取或使用本地资源等 -->
            <!-- 为了简单示例，我们手动添加几个常见的emoji作为示例 -->
            <span @click="selectEmoji('😀')">😀</span>
            <span @click="selectEmoji('😜')">😜</span>
            <span @click="selectEmoji('🥳')">🥳</span>
            <span @click="selectEmoji('😭')">😭</span>
            <span @click="selectEmoji('👍')">👍</span>
            <span @click="selectEmoji('😄')">😄</span>
            <span @click="selectEmoji('😊')">😊</span>
            <span @click="selectEmoji('🥰')">🥰</span>
            <span @click="selectEmoji('😡')">😡</span>
            <span @click="selectEmoji('🤔')">🤔</span>
            <span @click="selectEmoji('🤩')">🤩</span>
            <span @click="selectEmoji('😎')">😎</span>
            <span @click="selectEmoji('😁')">😁</span>
            <span @click="selectEmoji('😂')">😂</span>
            <span @click="selectEmoji('😆')">😆</span>
            <span @click="selectEmoji('😜')">😜</span>
            <span @click="selectEmoji('😝')">😝</span>
            <span @click="selectEmoji('😏')">😏</span>
            <span @click="selectEmoji('😍')">😍</span>
            <span @click="selectEmoji('😘')">😘</span>
            <span @click="selectEmoji('😳')">😳</span>
            <span @click="selectEmoji('😌')">😌</span>
            <span @click="selectEmoji('😒')">😒</span>
            <span @click="selectEmoji('😕')">😕</span>
            <span @click="selectEmoji('😖')">😖</span>
            <span @click="selectEmoji('😒')">😒</span>
            <span @click="selectEmoji('🙌')">🙌</span>
            <span @click="selectEmoji('👌')">👌</span>
            <span @click="selectEmoji('💕')">💕</span>
            <span @click="selectEmoji('❤️')">❤️</span>
             <span @click="selectEmoji('🤷‍♂️')">🤷‍♂️</span>
            <span @click="selectEmoji('😶‍🌫️')">😶‍🌫️</span>
            <span @click="selectEmoji('🥶')">🥶</span>
            <span @click="selectEmoji('👻')">👻</span>
            <span @click="selectEmoji('🤡')">🤡</span>
            <span @click="selectEmoji('💩')">💩</span>
            <span @click="selectEmoji('😴')">😴</span>
            <span @click="selectEmoji('🐹')">🐹</span>
            <span @click="selectEmoji('🐰')">🐰</span>
            <span @click="selectEmoji('🤷‍♂️')">🤷‍♂️</span>
            <span @click="selectEmoji('🤢')">🤢</span>
            <span @click="selectEmoji('🐼')">🐼</span>
            <span @click="selectEmoji('😖')">😖</span>
            <span @click="selectEmoji('😒')">😒</span>
            <span @click="selectEmoji('💀')">💀</span>
            <span @click="selectEmoji('🐒')">🐒</span>
            <span @click="selectEmoji('🐖')">🐖</span>
             <span @click="selectEmoji('😰')">😰</span>
            </van-popup>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
    setup(props, context) {
         const showBottom = ref(false);
        //  子传父
         const emit = context.emit;
        //  弹出选择表情包
        const showPopup = () => {
        showBottom.value = true;
        console.log("vef");
      
    };
        const selectEmoji = (emoji: string) => {
            showBottom.value = false;
            // 这里可以将选中的emoji发送到父组件（ChatRoom.vue）进行处理
            emit('emoji-selected',{ detail: { emoji }})
            const event = new CustomEvent('emoji-selected', { detail: { emoji } });
            window.dispatchEvent(event);
            console.log(event);
        };

        return {
            selectEmoji,
            showBottom,
            showPopup,
        };
    }
});
</script>

<style scoped>
.emoji-picker {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 5px;
    max-width: 300px;
    margin: 0 auto;
}

.emoji-grid span {
    font-size: 24px;
    cursor: pointer;
}
</style>